<template>
  <div class="employee-task-progress">
    <!-- 假设员工数据是一个数组 -->
    <div v-for="employee in employees" :key="employee.id" class="employee-box">
      <p>{{ employee.name }}</p>
      <!-- 使用 Element Plus 的进度条组件展示任务完成进度 -->
      <el-progress :percentage="employee.progress"></el-progress>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟员工数据
const employees = ref([
  { id: 1, name: '员工 A', progress: 30 },
  { id: 2, name: '员工 B', progress: 60 },
  { id: 3, name: '员工 C', progress: 90 },
  { id: 4, name: '员工 C', progress: 90 },
  { id: 5, name: '员工 C', progress: 90 },
  { id: 6, name: '员工 C', progress: 90 },
  { id: 7, name: '员工 C', progress: 90 },
  { id: 8, name: '员工 C', progress: 90 },
  { id: 9, name: '员工 C', progress: 90 },
  { id: 10, name: '员工 C', progress: 90 },
  { id: 11, name: '员工 C', progress: 90 }
  // 可以添加更多员工数据
]);
</script>

<style scoped>
.employee-task-progress {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.employee-box {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
}
</style>
